<template>
    <view class="content">
        <view class="box">
            <view class="top">
                <view class="top-img">
                    <image :src="img || '/static/icon/avatar.png'" class="avatar"></image>
                    <image src="/static/icon/photo.png" class="photo" v-if="!disabled" @click="$screenshot('logo',1,1)"></image>
                </view>
            </view>
            <view>
                <view class="item">
                    <view class="item-l">姓名</view>
                    <!-- <view class="u-flex-1">王先生</view> -->
                    <input type="text" v-model="name" :disabled="disabled" placeholder="请输入姓名" class="inp">
                </view>
                <view class="item">
                    <view class="item-l">手机号</view>
                    <input type="number" v-model="tel" :disabled="disabled" placeholder="请输入手机号" class="inp">
                </view>
                <view class="item">
                    <view class="item-l">佣金</view>
                    <!-- <view class="item-l">待结佣</view> -->
                    ￥<input type="digit" v-model="price" :disabled="true" placeholder="请输入佣金" class="inp">
                </view>
                <view class="item">
                    <view class="item-l">身份证号</view>
                    <input type="idcard" v-model="idcard" :disabled="disabled" placeholder="请输入身份证号" class="inp">
                </view>
                <view class="item">
                    <view class="item-l">职位</view>
                    <input type="text" v-model="job" disabled placeholder="请选择职位" class="inp" v-if="disabled">
                    <input type="text" v-model="job" disabled placeholder="请选择职位" class="inp" v-if="!disabled" @click="show_1 = true">
                </view>
                <view class="item">
                    <view class="item-l">所属门店</view>
                    <input type="text" v-model="store" disabled placeholder="请选择所属门店" class="inp" v-if="disabled">
                    <input type="text" v-model="store" disabled placeholder="请选择所属门店" class="inp" v-if="!disabled" @click="show = true">
                </view>
                <view class="item2">
                    <view class="item-ll">身份证正反面照片</view>
                    <view class="u-flex u-row-between">
                        <image :src="fimg" class="sfz" @click="chooseImg(1)"></image>
                        <image :src="bimg" class="sfz" @click="chooseImg(2)"></image>
                    </view>
                </view>
            </view>
        </view>
		
		<!-- 店长不让修改 -->
		<template v-if="user_type != 6">
			<view class="btn" v-if="disabled" @click="disabled = false">立即修改</view>
			<view class="btn" v-if="!disabled" @click="$noMultipleClicks(doSubmit)">确认提交</view>
		</template>
        
        <!-- 职位 -->
        <u-select v-model="show_1" mode="single-column" :list="pList" value-name="id" label-name="name" @confirm="confirm"></u-select>
        
        <u-popup mode="bottom" v-model="show">
            <view class="popup">
                <u-search placeholder="请输入门店名称" v-model="keyword" :show-action="false" @search="doSearch"></u-search>
                <scroll-view scroll-y="true" style="height: 500rpx;">
                    <view>
                        <view class="popup-item" v-for="(item, index) in list" :key="index"
                            :class="{active : item.isSelect}" @click="choose(item)">
                            {{item.name}}
                        </view>
                    </view>
                </scroll-view>
                <view class="pop-btn" @click="confirmStore">确定</view>
            </view>
        </u-popup>
    </view>
</template>

<script>
    import { API_URL } from '@/static/js/common.js';
    export default {
        data() {
            return {
                noClick:true,//连点
                show_1: false,
                pList: [],
                show: false,
                keyword: '',
                list: [],
                URL: API_URL, //上传图片用的
                disabled: true,
                img: '',
                imgId: '',
                name: '',
                tel: '',
                price: '',
                idcard: '',
                job: '',
                jobId: '',
                store: '',
                storeId: '',
                fimg: '',
                fimgId: '',
                bimg: '',
                bimgId: '',
                id: '',
				user_type: '',
                // data: {},
            };
        },
        onLoad(option) {
            this.id = option.id
            this.getData()
            this.getPosition()
            this.getStore()
            // uni.setNavigationBarTitle({
            // 	title:'项目驻场详情'
            // })
            // uni.setNavigationBarTitle({
            // 	title:'店长详情'
            // })
            // uni.setNavigationBarTitle({
            // 	title:'运维经理详情'
            // })
			
			if (this.$getSync('userType')) {
				this.user_type = this.$getSync('userType')
			}
            
            var _this =this
            uni.$on('uAvatarCropper', data => {
                _this.$upLoadPic(data.path).then(ret => {
                    console.log(ret)
                    if (data.fromWhere == "logo"){
                        _this.img = ret.detail.image
                        _this.imgId = ret.detail.image_id
                    }
                });
            })
        },
        methods: {
            doSubmit() {
                if (!this.imgId) {
                    this.$toast('请上传头像！');
                    return false;
                }
                if (!this.name) {
                    this.$toast('请输入姓名！');
                    return false;
                }
                if (!this.tel) {
                    this.$toast('请输入手机号！');
                    return false;
                }
                if (!this.$checkPhone(this.tel)) {
                    this.$toast('手机号码格式不正确');
                    return false;
                }
                if (!this.idcard) {
                    this.$toast('请输入身份证号！');
                    return false;
                }
                if (!this.$testIdCard(this.idcard)) {
                    this.$toast('身份证号码格式不正确');
                    return false;
                }
                if (!this.jobId) {
                    this.$toast('请选择职位！');
                    return false;
                }
                if (!this.storeId) {
                    this.$toast('请选择门店！');
                    return false;
                }
                if (!this.fimgId) {
                    this.$toast('请上传身份证（人像面）！');
                    return false;
                }
                if (!this.bimgId) {
                    this.$toast('请上传身份证（国徽面）！');
                    return false;
                }
                this.$ajax('users_submit', {
                    user_token: this.$getSync('userToken'),
                    user_name: this.name,//姓名
                    phone: this.tel,//手机号
                    password: '',//密码
                    code: '',//邀请码
                    stores_id: this.storeId,//门店id，分割字符串
                    id_number: this.idcard,//身份证
                    front_img_id: this.fimgId,//身份证正面图id
                    back_img_id: this.bimgId,//身份证反面图id
                    image_id: this.imgId,//头像id
                    id: this.id,//编辑 人员id
                    user_type: this.jobId,//编辑 职位id
                    base_pay: '',//编辑 底薪
                    user_status: 1,//编辑 1正常 2禁用
                    pending_money: this.price,//编辑 佣金
                }).then(ret => {
                    if (ret.success == 1000) {
                        this.$toast('提交成功');
                        setTimeout(() => {
                            this.$backT()
                        }, 500)
                    } else {
                        this.$toast(ret.msg);
                    }
                });
            },
            
            // 选择职位
            confirm(e) {
                console.log(e)
                this.job = e[0].label
                this.jobId = e[0].value
            },
            // 选择门店
            choose(item) {
                item.isSelect = !item.isSelect
            },
            confirmStore() {
                var a = [], b = []
                if (this.list && this.list.length > 0) {
                    this.list.forEach(cur => {
                        if (cur.isSelect) {
                            a.push(cur.name)
                            b.push(cur.id)
                        }
                    })
                }
                this.store = a.join(',')
                this.storeId = b.join(',')
                this.show = false
            },
            // 搜索门店
            doSearch() {
                this.getStore()
            },
            // 获取门店列表
            getStore() {
                this.$ajax('stores', {
                    code: '',//机构邀请码
                    name: this.keyword,//搜索
                }).then(ret => {
                    if (ret.success == 1000) {
                        this.list = ret.detail
                        if (this.list && this.list.length > 0) {
                            this.list.forEach(cur => {
                                this.$set(cur, 'isSelect', false)
                            })
                        }
                    } else {
                        this.$toast(ret.msg);
                    }
                });
            },
            
            // 获取职位
            getPosition() {
            	this.$ajax('user_position', {
                    user_token: this.$getSync('userToken'),
            	}).then(ret => {
            		if (ret.success == 1000) {
                        this.pList = ret.detail.data
            		} else {
            			this.$toast(ret.msg);
            		}
            	});
            },
            getData() {
                this.$ajax('users_detail', {
                	user_token: this.$getSync('userToken'),
                	id: this.id,//人员id
                }).then(ret => {
                	if (ret.success == 1000) {
                        this.img = ret.detail.headimgurl
                        this.imgId = ret.detail.image_id
                        this.name = ret.detail.user_name
                        this.tel = ret.detail.phone
                        this.price = ret.detail.pending_money
                        this.idcard = ret.detail.id_number
                        this.job = ret.detail.position
                        this.jobId = ret.detail.user_type
                        this.store = ret.detail.stores
                        this.storeId = ret.detail.stores_id
                        this.fimg = ret.detail.front_img
                        this.fimgId = ret.detail.front_img_id
                        this.bimg = ret.detail.back_img
                        this.bimgId = ret.detail.back_img_id
                	} else {
                		this.$toast(ret.msg);
                	}
                });
            },
            
            chooseImg(num) {
                if (!this.disabled) {
                    uni.chooseImage({
                        count: 1, //默认9
                        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                        sourceType: ['album', 'camera'], // 相机拍照 album 相册、camera 拍照
                        success: (res) => {
                            uni.uploadFile({
                                url: this.URL + 'api/upload_image', //仅为示例，并非真实接口地址。
                                filePath: res.tempFilePaths[0],
                                name: 'image',
                                formData:{module: 'api'},
                                success: result => {
                                    console.log(result)
                                    let data = JSON.parse(result.data).detail; //后台返回的路径data.attach_uri
                                    if (num == 1) {
                                        this.fimg = data.image
                                        this.fimgId = data.image_id
                                    } else {
                                        this.bimg = data.image
                                        this.bimgId = data.image_id
                                    }
                                }
                            });
                        }
                    });
                }
            },
        }
    };
</script>

<style lang="scss">
    .popup{
        padding: 24rpx;
    }
    .popup-item{
        padding: 20rpx 0;
        text-align: center;
    }
    .active{
        font-weight: bold;
        color: #00a1e9;
    }
    .pop-btn{
        color: #fff;
        background-color: #00a1e9;
        padding: 20rpx;
        text-align: center;
        margin: 20rpx;
        border-radius: 50rpx;
    }
    
    page{
        background-color: #f5f5f5;
    }
    .box{
        background-color: #fff;
        padding: 30rpx 25rpx 0;
    }
    .top{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-bottom: 25rpx;
    }
    .top-img{
        position: relative;
    }
    .avatar{
        width: 165rpx;
        height: 165rpx;
        border-radius: 50%;
        border: 2rpx solid #e6e6e6;
    }
    .photo{
        width: 44rpx;
        height: 44rpx;
        position: absolute;
        bottom: 0;
        right: 0;
    }
    .top-name{
        font-size: 34rpx;
        padding-top: 15rpx;
    }
    .title{
        font-size: 40rpx;
        padding-bottom: 20rpx;
    }
    .item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 30rpx;
        border-bottom: 2rpx solid #e6e6e6;
        padding: 30rpx 0;
    }
    .item:last-child{
        border-bottom: none;
    }
    .item2{
        font-size: 30rpx;
        padding: 30rpx 0;
    }
    .item-l{
        color: #999;
        width: 150rpx;
    }
    .item-ll{
        color: #999;
        padding-bottom: 25rpx;
    }
    .inp{
        flex: 1;
        // height: 105rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .btn{
        font-size: 34rpx;
        color: #fff;
        text-align: center;
        padding: 25rpx;
        margin: 50rpx 25rpx;
        background-color: #00a1e9;
        border-radius: 50rpx;
    }
    .sfz{
        width: 320rpx;
        height: 180rpx;
        border-radius: 15rpx;
    }
    
</style>
